<template>
  <div v-loading="spinning">
    <el-row style="margin-top: 15px">
      <el-col :span="1">&nbsp;</el-col>
      <el-space>
        <el-select
          v-model="tableInfo.dataName"
          placeholder="请选择"
          style="width: 120px"
          @change="tableInfo.onTableChange"
        >
          <el-option
            v-for="tbl in data.tableList"
            :key="tbl.dataName"
            :label="tbl.dataName"
            :value="tbl.dataSqlName"
          />
        </el-select>

        <el-button type="success" @click="tableInfo.addCol">新增</el-button>
        <el-button type="success" @click="tableInfo.saveModel">修改</el-button>

        <el-checkbox v-model="tableInfo.canInsert">可新增</el-checkbox>

        <el-checkbox v-model="tableInfo.canUpdate">可更新</el-checkbox>

        <el-checkbox v-model="tableInfo.canDelete">可删除</el-checkbox>

        <el-input v-model="tableInfo.dataName" placeholder="请输入内容">
          <template #prepend>标识名</template>
        </el-input>

        <el-input v-model="tableInfo.dataSqlName" placeholder="请输入内容">
          <template #prepend>表名</template>
        </el-input>

        <!-- <MapValueEdit v-model="tableInfo.colClickValue" addonBefore="事件" /> -->

        <el-button type="success" @click="goToManage">数据管理</el-button>
      </el-space>
    </el-row>
    <el-row style="text-align: center; margin-top: 20px">
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="3" style="padding-right: 15px"><b>字段展示名称</b></el-col>
      <el-col :span="3" style="padding-right: 15px"><b>字段数据库名称</b></el-col>
      <el-col :span="3" style="padding-right: 15px"><b>数据类型</b></el-col>
      <el-col :span="2" style="padding-right: 15px"><b>是否是索引</b></el-col>
      <el-col :span="2" style="padding-right: 15px"><b>是否可以更新</b></el-col>
      <el-col :span="2" style="padding-right: 15px"><b>是否可以新增</b></el-col>
      <el-col :span="4" style="padding-right: 15px"><b>查询条件类型</b></el-col>
      <el-col :span="2" style="padding-right: 15px"><b>是否附加信息</b></el-col>
    </el-row>
    <div v-for="(col, index) in tableInfo.colModel" :key="index">
      <el-row style="text-align: center; margin-top: 15px">
        <el-col :span="1">
          <el-button type="primary" @click="tableInfo.delCol(col)" :disabled="index == 0">
            <Icon icon="ep:delete" class="mr-1px" />
          </el-button>
        </el-col>
        <el-col :span="3" style="padding-right: 15px">
          <el-input v-model="col.colName" placeholder="请输入内容" :disabled="index == 0" />
        </el-col>
        <el-col :span="3" style="padding-right: 15px">
          <el-input v-model="col.colSqlName" placeholder="请输入内容" :disabled="index == 0" />
        </el-col>
        <el-col :span="3" style="padding-right: 15px">
          <el-select v-model="col.colDataType" placeholder="请选择" :disabled="index == 0">
            <el-option label="日期" value="date">日期</el-option>
            <el-option label="数字" value="num">数字</el-option>
            <el-option label="字符" value="char">字符</el-option>
            <el-option label="文本" value="text">文本</el-option>
            <el-option label="枚举" value="enum">枚举</el-option>
            <el-option label="是否" value="bol">是否</el-option>
            <el-option label="键值对" value="map">键值对</el-option>
            <el-option label="文件上传" value="upload">文件上传</el-option>
            <el-option label="WEB组件" value="webComponentName">WEB组件</el-option>
          </el-select>
        </el-col>
        <el-col :span="2" style="padding-right: 15px">
          <el-select v-model="col.colIsIndex" placeholder="请选择" :disabled="index == 0">
            <el-option value="1" label="是">是</el-option>
            <el-option value="0" label="否">否</el-option>
          </el-select>
        </el-col>
        <el-col :span="2" style="padding-right: 15px">
          <el-select v-model="col.colCanUpdate" placeholder="请选择" :disabled="index == 0">
            <el-option value="1" label="是">是</el-option>
            <el-option value="0" label="否">否</el-option>
          </el-select>
        </el-col>
        <el-col :span="2" style="padding-right: 15px">
          <el-select v-model="col.colCanInsert" placeholder="请选择" :disabled="index == 0">
            <el-option value="2" label="必须新增">必须新增</el-option>
            <el-option value="1" label="可以新增">可以新增</el-option>
            <el-option value="0" label="禁止新增">禁止新增</el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="padding-right: 15px">
          <el-select v-model="col.colQueryType" placeholder="请选择" :disabled="index == 0">
            <el-option value="0" label="不是查询条件">不是查询条件</el-option>
            <el-option value="1" label="单个定值查询条件">单个定值查询条件</el-option>
            <el-option value="2" label="单个模糊查询条件">单个模糊查询条件</el-option>
            <el-option value="3" label="范围定值查询条件">范围定值查询条件</el-option>
          </el-select>
        </el-col>
        <el-col :span="2" style="padding-right: 15px">
          <el-select v-model="col.colOther" placeholder="请选择" :disabled="index == 0">
            <el-option value="1" label="是">是</el-option>
            <el-option value="0" label="否">否</el-option>
          </el-select>
        </el-col>
      </el-row>
      <div v-if="col.colDataType == 'enum' || col.colDataType == 'upload' || col.colOther == '1'">
        <el-row v-if="col.colDataType == 'enum'">
          <el-col :span="21" :offset="1" style="padding-right: 15px">
            <!-- <MapValueEdit v-model="col.colEnumsValue" addonBefore="下拉选项" /> -->
            <el-input
              addon-before="上传业务类型"
              v-model="col.colEnumsValue"
              placeholder="请输入内容"
            >
              <template #prepend>枚举值信息</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="col.colDataType == 'upload'">
          <el-col :span="21" :offset="1" style="padding-right: 15px">
            <el-input addon-before="上传业务类型" v-model="col.uploadType" placeholder="请输入内容">
              <template #prepend>上传业务类型</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="col.colDataType == 'webComponentName'">
          <el-col :span="21" :offset="1" style="padding-right: 15px">
            <el-input v-model="col.webComponentName" placeholder="请输入内容">
              <template #prepend>WEB组件名称</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="col.colOther == '1'">
          <el-col :span="10" :offset="1" style="padding-right: 15px">
            <el-select
              v-model="col.pattern"
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="select"
              style="width: 100%"
            >
              <el-option-group v-for="group in reData" :key="group.label" :label="group.label">
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.text + ':   ' + item.value"
                  :value="item.value"
                />
              </el-option-group>
            </el-select>
          </el-col>
          <el-col :span="10" :offset="1" style="padding-right: 15px">
            <el-input v-model="col.patternMsg" placeholder="请输入内容">
              <template #prepend>校验不通过提示信息</template>
            </el-input>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import {
  ElMessage,
  ElRow,
  ElCol,
  ElInput,
  ElButton,
  ElSpace,
  ElSelect,
  ElOption,
  ElCheckbox,
  ElOptionGroup
} from 'element-plus'
import { reData } from './data'
import request from '@/config/axios'
const data = reactive({
  tableList: [
    {
      id: 0,
      canInsert: true,
      canUpdate: true,
      canDelete: false,
      dataName: '',
      dataSqlName: '',
      colsJson: '',
      colClickValue: '',
      colModel: [
        {
          colCanInsert: '1',
          colCanUpdate: '1',
          colDataType: 'char',
          colIsIndex: '0',
          colName: '序号',
          colQueryType: '0',
          colSqlName: 'id',
          colEnumsValue: '',
          uploadType: '',
          webComponentName: '',
          pattern: '',
          patternMsg: '',
          colOther: '0'
        }
      ]
    }
  ]
})
const tableInfo = reactive({
  id: 0,
  canInsert: true,
  canUpdate: true,
  canDelete: false,
  dataName: '',
  dataSqlName: '',
  colsJson: '',
  colClickValue: '',
  colModel: [
    {
      colCanInsert: '1',
      colCanUpdate: '1',
      colDataType: 'char',
      colIsIndex: '0',
      colName: '序号',
      colQueryType: '0',
      colSqlName: 'id',
      colEnumsValue: '',
      uploadType: '',
      webComponentName: '',
      pattern: '',
      patternMsg: '',
      colOther: '0'
    },
    {
      colCanInsert: '0',
      colCanUpdate: '0',
      colDataType: 'char',
      colIsIndex: '0',
      colName: '创建者',
      colQueryType: '1',
      colSqlName: 'creator',
      colEnumsValue: '',
      uploadType: '',
      pattern: '',
      patternMsg: '',
      colOther: '0'
    },
    {
      colCanInsert: '0',
      colCanUpdate: '0',
      colDataType: 'date',
      colIsIndex: '0',
      colName: '创建时间',
      colQueryType: '3',
      colSqlName: 'create_time',
      colEnumsValue: '',
      uploadType: '',
      pattern: '',
      patternMsg: '',
      colOther: '0'
    },
    {
      colCanInsert: '0',
      colCanUpdate: '0',
      colDataType: 'char',
      colIsIndex: '0',
      colName: '更新者',
      colQueryType: '1',
      colSqlName: 'updater',
      colEnumsValue: '',
      uploadType: '',
      pattern: '',
      patternMsg: '',
      colOther: '0'
    },
    {
      colCanInsert: '0',
      colCanUpdate: '0',
      colDataType: 'date',
      colIsIndex: '0',
      colName: '更新时间',
      colQueryType: '3',
      colSqlName: 'update_time',
      colEnumsValue: '',
      uploadType: '',
      pattern: '',
      patternMsg: '',
      colOther: '0'
    }
  ],
  addCol: () => {
    tableInfo.colModel.splice(tableInfo.colModel.length - 4, 0, {
      colCanInsert: '1',
      colCanUpdate: '1',
      colDataType: 'char',
      colIsIndex: '0',
      colName: '',
      colQueryType: '0',
      colSqlName: '',
      colEnumsValue: '',
      uploadType: '',
      webComponentName: '',
      pattern: '',
      patternMsg: '',
      colOther: '0'
    })
  },
  delCol: (col) => {
    let index = tableInfo.colModel.indexOf(col)
    if (index != -1) {
      tableInfo.colModel.splice(index, 1)
    }
  },
  saveModel() {
    if (!tableInfo.dataSqlName || !tableInfo.dataName) {
      ElMessage.warning('标识名和表名不能为空!')
    }
    tableInfo.colsJson = JSON.stringify(tableInfo.colModel)
    request.postFormFull(
      {
        url: '/infra/base/dynamicTable/saveOrUpdateTable',
        data: {
          modelJson: JSON.stringify(tableInfo)
        }
      },
      spinning
    )
  },
  onTableChange(value) {
    data.tableList.forEach((tbl) => {
      if (tbl.dataSqlName == value) {
        spinning.value = true
        request
          .get({
            url: '/infra/base/dynamicTable/getTable/' + value
          })
          .then((data) => {
            tableInfo.id = tbl.id
            tableInfo.canInsert = tbl.canInsert
            tableInfo.canUpdate = tbl.canUpdate
            tableInfo.canDelete = tbl.canDelete
            tableInfo.dataName = tbl.dataName
            tableInfo.dataSqlName = tbl.dataSqlName
            tableInfo.colClickValue = tbl.colClickValue
            tableInfo.colModel = data.colModel
            spinning.value = false
          })
      }
    })
  }
})
function goToManage() {
  if (!tableInfo.dataSqlName) {
    ElMessage.warning('请先选择数据类型')
    return
  }
  window.open('#/s/dynamicTable/' + tableInfo.dataSqlName)
}

const spinning = ref(false)
onMounted(() => {
  spinning.value = true
  request
    .get({
      url: '/infra/base/dynamicTable/listTable/'
    })
    .then((value) => {
      //tableInfo = data.dataModel;
      value.sort(function (A, B) {
        return A.dataName.localeCompare(B.dataName)
      })
      data.tableList = value
    })
    .finally(() => {
      spinning.value = false
    })
})
</script>
